<template>
	<div class="dinfo">
		<div class="info">
			<span>
				用户名 : 
				<input class="inf" type="text" disabled :value="user.nickname">
			</span>
			<span>
				账号 : 
				<input class="inf" type="text" disabled :value="user.acountname">
			</span>
			<span>
				电话 : 
				<input class="inf" type="text" disabled :value="user.phone">
			</span>
			<span>
				邮箱 : 
				<input class="inf" type="text" disabled :value="user.email">
			</span>
			<span>
				密码 : 
				<input class="inf" type="text" disabled :value="user.password">
			</span>
		</div>
	</div>
</template>

<script>
	export default{
		name:'DetailInfo',
		data() {
			return{
				user:{
					nickname:'',
					acountname:'',
					phone:'',
					email:'',
					password:''
				}
			}
		},
		methods:{
			get(nickname){
				console.log('获取用户名 ',nickname);
				var user={
					nickname:nickname,
					acountname:nickname+'账号',
					phone:nickname+'电话',
					email:nickname+'邮箱',
					password:nickname+'密码'
				}
				this.user=user;
			}
		},
		beforeMount() {
			this.$bus.$on("getNickname",this.get);
		}
	}
</script>

<style scoped>
	.dinfo{
		flex: 3;
		height: 100%;
		margin-left: 0.625rem;
		overflow: auto;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		background-color: white;
		border: 0.7px solid rgb(235, 235, 235);
		border-radius: 5px 5px;
		box-shadow: -2px -2px 0.5em gray;
	}
	.info{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		width: 50%;
		height: 50%;
		border: 2px red solid;
	}
	span{
		margin-top: 1.25rem;
		border-bottom: 2px purple solid;
	}
</style>